<template>
	<view class="change-mobile">
		<view class="get-code">
			<input type="text" class="set-phone" placeholder='请输入手机号'>
			<view class="commit" @tap="sendCode">{{btnText}}</view>
		</view>
		<input type="text" class="set-code" placeholder='请输入验证码'>
		<view class="next" @tap="login">登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time: 60, // 时间
				btnText: '发送验证码', // 提示文字
				sendKey: true, // 请求key
			};
		},
		methods: {
			// 发送验证码
			sendCode() {
				if (!this.sendKey) return
				this.sendKey = false
				const t = setInterval(() => {
					this.time--
					this.btnText = this.time + 's后发送'
					if (this.time == 0) {
						clearInterval(t)
						this.btnText = '发送验证码'
						this.time = 60
						this.sendKey = true
					}
				}, 1000)
			},
			// 登录
			login() {
				// @todo
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.change-mobile {
		@include box-w(100%);
		padding: 46rpx 32rpx 0;

		.get-code {
			@include flex-row(space-between);
			border: 2rpx solid $bg-a;
			padding-left: 26rpx;
			input{
				@include box(486rpx, 100rpx);
			}
			.commit {
				@include box(220rpx, 100rpx, $bg-d);
				@include font-set($font-a, $color-c);
				@include flex-row();
				border-left:2rpx solid $bg-a;
			}
		}

		.set-code {
			margin-top: 46rpx;
			@include box(100%, 100rpx);
			border: 2rpx solid $bg-a;
			padding-left: 26rpx;
		}

		.next {
			@include box(296rpx, 100rpx, $bg-a);
			border-radius: 10rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.3);
			@include flex-row();
			@include font-set($font-a, $color-a);
			margin: 80rpx auto 0;
		}

	}
</style>
